<!-- 编辑资料 -->
<template>
  <div id="dataBox">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="140px" class="demo-ruleForm">
      <!-- 头像 -->
      <el-form-item prop="imageUrl" >
        <div class="userAvatar" >
          <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
                     :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"  ><plus /></el-icon>
          </el-upload>
        </div>
      </el-form-item>
      <!-- 昵称 -->
      <el-form-item label="昵称" prop="name">
        <el-input style="width: 400px;display: flex" v-model="ruleForm.name"></el-input>
      </el-form-item>
      <!-- 个性签名 -->
      <el-form-item label="个人签名" prop="autograph">
        <el-input style="width: 400px;display: flex" v-model="ruleForm.autograph"></el-input>
      </el-form-item>
      <!-- 邮箱 -->
      <el-form-item label="邮箱" prop="email">
        <el-input style="width: 400px;display: flex" v-model="ruleForm.email"></el-input>
      </el-form-item>
      <!-- 学院 -->
      <el-form-item label="学院" prop="institute">
        <el-select style="display: flex;width: 200px;" v-model="ruleForm.institute" placeholder="选择你的学院">
          <el-option label="信商学院" value="xinshang"></el-option>
          <el-option label="财经学院" value="caijing"></el-option>
          <el-option label="工商学院" value="gongshang"></el-option>
          <el-option label="建艺学院" value="jianyi"></el-option>
          <el-option label="外语学院" value="waiyu"></el-option>
        </el-select>
      </el-form-item>
      <!-- 性别 -->
      <el-form-item label="性别" prop="sex">
        <el-radio-group style="display: flex"  v-model="ruleForm.sex" >
          <el-radio style="height: 40px;line-height: 40px" label="男"></el-radio>
          <el-radio style="height: 40px;line-height: 40px" label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 经历 -->
      <el-form-item label="经历" prop="experience">
        <el-input style="width: 400px;display: flex" v-model="ruleForm.experience" type="textarea"></el-input>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-button style="margin-left: -140px;" type="primary" @click="submitForm('ruleForm')"
        >Create</el-button>
        <el-button @click="resetForm('ruleForm')">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script scope>
// import { ref } from 'vue'
import { Plus } from '@element-plus/icons'
export default {

  components: {
    Plus
  },
  data () {
    return {
      imageUrl: '',
      ruleForm: {
        name: '',
        autograph: '',
        email: '',
        institute: '',
        sex: '',
        experience: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入昵称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '字数只能3~10个',
            trigger: 'blur'
          }
        ],
        autograph: [
          {
            required: true,
            message: '请输入你的个性签名',
            trigger: 'blur'
          },
          {
            min: 0,
            max: 50,
            message: '字数不能超过50',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请绑定邮箱',
            trigger: 'blur'
          },
          {
            min: 0,
            max: 50,
            message: 'Length should be 0 to 50',
            trigger: 'blur'
          }
        ],
        institute: [
          {
            required: true,
            message: '请选择你的学院',
            trigger: 'change'
          }
        ],
        sex: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }
        ],
        experience: [
          {
            required: true,
            message: '添加经历',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('Avatar picture must be JPG format!')
      }
      if (!isLt2M) {
        this.$message.error('Avatar picture size can not exceed 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
#dataBox{
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 25px;
  padding-bottom: 20px;
  background-color: white;
}
.demo-ruleForm{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
.avatar-uploader-icon svg {
  margin-top: 74px; /* (178px - 28px) / 2 - 1px */
}
.userAvatar{
  margin-bottom:-22px;
  margin-right:150px;
}
.avatar{
  width: 80px;
  height:80px;
  display: block;
}
</style>
